<!-- 行为 -->
 <!-- lang="ts" :支持ts语法  setup：是 Vue3 的组合式 API 写法 -->
<script lang="ts" setup>
import { ref} from 'vue'
// ref 包装后，会返回一个 ref 对象，初始化的数据被保存在 ref 对象的 value 属性中
const totalCount = ref(100)
console.log(totalCount)//ref 对象
const addCount =()=>{
  // 修改 .value 属性更新视图
  totalCount.value++
}
const decreaseCount =()=>{
  // 修改ref的对象的 .value 自动更新视图
  totalCount.value--
}
</script>

<!-- 结构 -->
 <template>
  <button @click="addCount()">+</button>
  <!-- template  可以被直接渲染 ref 数据，不需要使用 .value -->
  <span>{{ totalCount }}</span>
  <button @click="decreaseCount">-</button>
 </template>

 <!-- 样式 -->
  <!-- scoped:样式 只对当前组件有效 -->
  <style scoped>

</style>